<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>AdminLTE 3 | Vue3 | Layout</title>

  <!-- Google Font: Source Sans Pro -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <!-- Font Awesome Icons -->
  <link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="css/adminlte.min.css">
</head>
<body>
<div class="wrapper" id="app">

  <!-- 顶部页头 -->
  <lte-main-header>
	  <!-- 这里要写完整的标签，如果写简写的标签，只能渲染出一个组件，原因未知（可能是把第二个当成了结束标签了吧）-->
	  <lte-main-header-navbar-left></lte-main-header-navbar-left>
	  <lte-main-header-navbar-right></lte-main-header-navbar-right>
  </lte-main-header>

  <!-- 左侧菜单 -->
  <lte-main-sidebar>
	  <lte-main-sidebar-logo></lte-main-sidebar-logo>
  </lte-main-sidebar>

  <!-- 工作区 -->
  <lte-main-content></lte-main-content>

  <!-- 底部页脚 -->
  <lte-main-footer>
	  <lte-copy-right></lte-copy-right>
	  <lte-version></lte-version>
  </lte-main-footer>
  
  <!-- TODO: 需要考虑这个层的作用 -->
  <div id="sidebar-overlay"></div>
</div>
<!-- ./wrapper -->

<script src="https://unpkg.com/vue@3.0.11/dist/vue.global.js"></script>
<script type="text/javascript">
	const app = Vue.createApp({
		// 必须是函数形式
		data() {
			return {
				message: "Hello Vue!",
			}
		},
		beforeCreate() {
			// 阻止动画效果
			document.body.classList.add("hold-transition");
			// 最小化sidebar
			document.body.classList.add("sidebar-mini");
		},
		created() {
			// 完全模仿adminlte的作法，没搞明白这个样式为什么要先加上，而后再去掉
			document.body.classList.remove("hold-transition");
		}
	})
	
	app.component('lte-main-header', {
		template: `<nav class="main-header navbar navbar-expand navbar-white navbar-light" style="min-height:3.5rem;">
			<slot></slot>
		</nav>`
	});
	
	app.component('lte-main-header-navbar-left', {
		template: `<ul class="navbar-nav">
			  <!--d-none d-sm-inline-block 此组样式表示在窄屏（手机竖版）下隐藏-->
			  <li class="nav-item">
				<lte-push-menu/>
			  </li>
			</ul>`
	});
	
	app.component('lte-push-menu', {
		methods: {
			toggleMenu() {
				console.log("has sidebar-collapse?",document.body.classList.contains("sidebar-collapse"));
				console.log(document.body.classList);
				if (!document.body.classList.contains("sidebar-collapse")) {
					document.body.classList.add("sidebar-collapse");
					//document.body.classList.add("sidebar-is-opening");
				} else {
					document.body.classList.remove("sidebar-collapse");
				}
			}
		},
		template: `<a class="nav-link" @click="toggleMenu" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>`
	});
	
	app.component('lte-main-header-navbar-right', {
		template: `<ul class="navbar-nav ml-auto">
			  <li class="nav-item">
			    <lte-full-screen/>
			  </li>
			</ul>`
	});
	
	// TODO: 通过ESC键退出全屏时，图标不能触发改变
	app.component('lte-full-screen', {
		data() {
			return {
				minimized: true,
				maximized: false,
			}
		},
		methods: {
			toggle() {
			  if (document.fullscreenElement ||
			    document.mozFullScreenElement ||
			    document.webkitFullscreenElement ||
			    document.msFullscreenElement) {
			    this.windowed()
			  } else {
			    this.fullscreen()
			  }
			},
			fullscreen() {
			  if (document.documentElement.requestFullscreen) {
			    document.documentElement.requestFullscreen()
			  } else if (document.documentElement.webkitRequestFullscreen) {
			    document.documentElement.webkitRequestFullscreen()
			  } else if (document.documentElement.msRequestFullscreen) {
			    document.documentElement.msRequestFullscreen()
			  }
			
			  this.maximized = true;
			  this.minimized = false;
			},
			windowed() {
			  if (document.exitFullscreen) {
			    document.exitFullscreen()
			  } else if (document.webkitExitFullscreen) {
			    document.webkitExitFullscreen()
			  } else if (document.msExitFullscreen) {
			    document.msExitFullscreen()
			  }
			
			  this.maximized = false;
			  this.minimized = true;
			}
		},
		template: `<a class="nav-link" @click="toggle" data-widget="fullscreen" href="#" role="button"><i :class="{'fa-expand-arrows-alt': minimized,'fa-compress-arrows-alt': maximized}" class="fas"></i></a>`
	});
	
	app.component('lte-main-sidebar', {
		template: `<aside class="main-sidebar sidebar-dark-primary elevation-4">
			<slot><p style="color:white;">SideBar</p></slot>
		</aside>`,
	});
	
	app.component('lte-main-sidebar-logo', {
		template: `<a href="index3.html" class="brand-link">
		  <img src="img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3" style="opacity: .8">
		  <span class="brand-text font-weight-light">AdminLTE 3</span>
		</a>`
	});
	
	app.component('lte-main-content', {
		template: `<div class="content-wrapper">
			<slot></slot>
		</div>`,
	});
	
	app.component('lte-main-footer', {
		template: `<footer class="main-footer" style="min-height:3.5rem;">
			<slot></slot>
		</footer>`,
	});
	
	app.component('lte-copy-right', {
		template: '<strong>Copyright &copy; 2014-2021 <a href="https://adminlte.io">AdminLTE.io</a>.</strong> All rights reserved.'
	})
	
	app.component('lte-version', {
		template: '<div class="float-right d-none d-sm-inline">AdminLTE-V3.1.0 & Vue3</div>'
	})
	
	// 挂载之前定义好组件，否则组件不生效
	const vm = app.mount('#app');
</script>
</body>
</html>
